<template>
	<view class="bonus">
		<view class="bonus-top">
			<block-progress :width="350" :percent="bonusData.money" :label="'元'" :color="color"></block-progress>
		</view>
		<view class="money">
			<view class="list">
				<text>可提现</text>
				<view class="list-right">
					<text class="money-num">{{userInfo.money}}</text>
					<text class="withdrawal" @click="goPage('/pages/users/withdrawal/withdrawal')">去提现</text>
				</view>
			</view>
		</view>
		<view class="pledges">
			<view class="list">
				<text>期数</text>
				<text>第 {{config.stage}} 期</text>
			</view>
			<view class="list">
				<text>人数</text>
				<text>总参与 {{config.users_num?config.users_num:'0'}} 人</text>
			</view>
			<view class="list">
				<text>数量</text>
				<text>总参与 {{config.currency?config.currency:'0'}} ZKB</text>
			</view>
		</view>
		<view class="participate">
			<view class="num">
				<text>参与限额：</text>
				<text>{{bonusData.min}} ~ {{bonusData.max}}zkb</text>
			</view>
			<view class="quick-input">
				<input type="number" :disabled="bonusData.switch==0 || bonusData.switch==2?true:false" 
				v-model="currency" :placeholder="bonusData.switch==0 ?'暂未开放':(bonusData.switch==2 ? '本期已结束，分红中' :'请输入参与数量')"/>
			</view>
			<view class="btn">
				<button type="default" :style="{background:bonusData.switch==1?'#2C405A':'',
				color:bonusData.switch==1?'#ffffff':'#2C405A'}"
				:disabled="bonusData.switch==0 || bonusData.switch==2?true:false" @click="btn()">参与分红</button>
			</view>
		</view>
		<view class="record">
			<view class="title">
				<text>参与记录：</text>
				<text>总分红：<span>{{totalMoney}}</span></text>
			</view>
			<view class="record-lists">
				<view class="record-list" v-for="(item,index) of lists" :key="index">
					<view class="list-time">
						<text class="stage">第 {{item.stage}} 期</text>
						<text class="time">{{formatDateDay(item.create_time*1000)}}</text>
					</view>
					<view class="list-money">
						<text class="currency">数量：<span>{{item.currency}}</span></text>
						<text class="bonus-money">分红：<span>{{item.money}}</span></text>
					</view>
					<view class="status">
						<text class="conduct" v-if="item.status==0">进行中</text>
						<text class="receive" @click="receive(item.stage)" v-if="item.status==1">领取</text>
						<text class="received" v-if="item.status==2">已领取</text>
					</view>
				</view>
			</view>
			<block-loading :status="status" :len="lists.length"></block-loading>
			<view class="see-more" v-if="lists.length>=6">
				<text @click="goPage('/pages/users/warehouse/bonus/more/more')">查看更多</text>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<news-flow :type="3"></news-flow>
		<!-- #endif -->
		<view class="rule">
			<view class="title">
				<text>分红中心说明</text>
			</view>
			<view class="rule-content">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import BlockProgress from "@/components/BlockProgress/BlockProgress.vue"
	import {getAllConfig,getRules,setBonus,seleAllBonus,receive,getBonusConfig} from '@/api/entrance.js'
	import {mapActions,mapState} from 'vuex';
	import {
		formatDateDay
	} from "@/utils/util.js"
	export default{
		name:"bonus",
		components:{
			BlockProgress
		},
		data(){
			return{
				color:['#333','#F4BD7D','#c00'],
				detail:{},
				bonusData:{},
				currency:"",
				page:1,
				lists:[],
				status:"loading",
				totalMoney:0,
				config:{}
			}
		},
		onLoad() {
			this.getConfig()
			this.getLists();
			this.getAgreement();
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods:{
			...mapActions(['setUserInfo_action']),
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			formatDateDay(val){
				return formatDateDay(val)
			},
			async getLists(){
				let res = await seleAllBonus({page:this.page,size:6});
				if(res.code === 1){
					if(this.page===1&&res.data.data.length === 0){
						this.status = "nodata"
						return
					}
					if(this.page===1&&res.data.data.length > 0 && res.data.data.length < 6){
						this.status = "nomore"
					}
					if(res.data.data.length === 0){
						this.status = "nomore"
						return;
					}
					this.lists = res.data.data;
					this.totalMoney = res.data.totalMoney
				}
			},
			async getAgreement(){
				let res = await getRules({
					keyword:'bonus_rule'
				})
				if(res.code ===1){
					if(res.data.length){
						res.data[0].content = res.data[0].content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;" ')
						this.detail = res.data[0]
					}
				}
			},
			async getConfig(){
				let res = await getAllConfig({type:3});
				if(res.code === 1){
					res.data.forEach((item)=>{
						if(item.keyword=='bonus_pledge'){
							this.bonusData = JSON.parse(item.value)
							this.getBonusConfig(this.bonusData.stage)
						}
					})
				}
			},
			async getBonusConfig(stage){
				let res = await getBonusConfig({stage:stage})
				if(res.code === 1){
					let data = res.data[0];
					data.stage = stage;
					this.config = data
				}
			},
			//参与分红
			async btn(){
				if(!this.currency){
					this.$msg("请输入数量")
					return;
				}
				let res = await setBonus({currency:this.currency})
				if(res.code === 1){
					this.currency = "";
					this.getLists();
					this.setUserInfo_action();
				}
				this.$msg(res.msg)
			},
			//领取分红
			async receive(stage){
				let res = await receive({stage:stage});
				if(res.code === 1){
					this.getLists();
					this.setUserInfo_action();
				}
				this.$msg(res.msg)
			}
		}
	}
</script>

<style lang="less" scoped src="./bonus.less">
</style>
